<template>
  <div class="continer">
    <div class="publish_content">
      <div class="publish_sections">
        <div class="publih_publish">
          <div>支付方式</div>
          <div @click="close_cloe()"><img src="../assets/closes.png" /></div>
        </div>
        <div class="think_publish">
          <div class="Payment_common" v-if="is_coin">
            <div> 
              <img src="../assets/gold.png" />
              <span>金币</span>
            </div>
            <input
              type="radio"
              color="#6582E8"
              value="coin"  
              v-model="PaymentMethod"
              name="radios"
            />  
          </div>
          <div class="Payment_common">
            <div>
              <img src="../assets/account_pay2.png" />
              <span>PayPal</span>
            </div>
            <input
              type="radio"
              color="#6582E8"
              value="paypal"
              checked="true"
              name="radios"
              v-model="PaymentMethod"
            />
          </div>
        </div>
        <div class="publish_imgs">
          <div class="publish_button" @click="pay_pay()">付款</div>
        </div>
      </div>
    </div>
    <div class="mask_contet" @click="close_cloe()"></div>
  </div>
</template>
<script>
import { PayPalRecharge, GoldUpdateMemberLevel } from "../utils/http.js";
export default {
  name: "PaymentMethod",
  props: {
    moneys: {
    },
    is_coin: {
      type: Boolean,
    },
    money_id: {
      type: String,
      default: "",
    },
  },
  data: () => ({
    is_selected: 1,
    PaymentMethod: "paypal",
  }),
  mounted() {},
  methods: {
    //pc google papal
    pc_payment() {
      if (this.PaymentMethod == "paypal") {
        layer.load(0, {
          shade: false,
        }); //0代表加载的风格，支持0-2
        let param = {
          TargetMember: "hudie123456", //用户名
          Gold: this.moneys, //金钱数
          PaymentMethod: this.PaymentMethod, //支付方式
        };
        PayPalRecharge(param).then((res) => {
          if (res.Code == 1) {
            window.location.href = res.Obj;
            window.open(res.Obj);
          }
          layer.closeAll();
        });
      } else {
        layer.load(0, {
          shade: false,
        }); //0代表加载的风格，支持0-2
        let param = {
          Gold: this.money_id, //金钱数
          Name: "hudie123456", //用户名
        };
        GoldUpdateMemberLevel(param).then((res) => {
          if (res.Code == 1) {
            //'升级成功'
            //提示层
            layer.msg("升级成功");
            // window.location.href = res.Obj;
            // window.open(res.Obj);
          } else if (res.Code == 2) {
            //收件人不存在
            layer.msg("收件人不存在");
          } else {
            // 金币不足，请充值//
             layer.msg("金币不足，请充值");
          }
          layer.closeAll();
        });
      }
    },
    close_cloe() {
      this.$emit("closes");
    },
    complaint(vals) {
      this.is_selected = vals;
    },
    input_pay(val) {
      console.log(val);
    },
    pay_pay() {
      this.pc_payment();
    },
  },
};
</script>
<style  scoped>
.continer {
  width: 100%;
}
.publish_content {
  width: 15%;
  margin: 0 auto;
  background: #ffffff;
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 99999;
  border-radius: 10px;
  padding-bottom: 12px;
  padding-top: 12px;
}
.publish_sections {
  width: 90%;
  margin: 0 auto;
}
.publih_publish {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
}
.think_publish {
  /* display: flex; */
  /* justify-content: space-between; */
  /* align-items: center; */
  /* text-align: center; */
  /* flex-wrap: wrap; */
}
.think_publish div {
  /* background: #ffffff; */
  /* border: 1px solid #e6e6e6; */
  /* border-radius: 6px; */
  /* font-size: 16px; */
  /* font-family: PingFang SC; */
  /* font-weight: 400; */
  /* color: #373c4c; */
  /* width: 47%; */
  /* line-height: 35px; */
  /* height: 35px; */
  /* margin-bottom: 10px; */
}
.Payment_common {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.Payment_common img {
  width: 1.2rem;
  height: 1.2rem;
}
.Payment_common span {
  margin-left: 10px;
  font-size: 16px;
  font-family: PingFang SC;
}
.publish_imgs {
  width: 100%;
}
.publish_button {
  background: linear-gradient(161deg, #637fe7, #3659cf);
  border-radius: 22px;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 30px;
  width: 35%;
  margin: 20px auto 10px auto;
  text-align: center;
  height: 30px;
}
.mask_contet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(221, 221, 221, 0.6);
  z-index: 9;
  height: 100%;
}
</style>